import React, { Component } from 'react';
import { AppRegistry, StyleSheet, View, Image, WebView, Dimensions, Platform, TouchableWithoutFeedback, Alert, DeviceEventEmitter } from 'react-native';
import { Container, Content, List, ListItem, Text, Thumbnail ,Icon} from 'native-base';
import { NavigationActions } from 'react-navigation';
import { MapView, MapTypes, Geolocation } from 'react-native-baidu-map';
import { connect } from 'react-redux';
import interaction from '../../net/interaction.js';
const { width, height } = Dimensions.get('window');
const marginTop = Platform.OS === 'ios' ? 20 : 0;
class course_tool extends Component {
    static navigationOptions = ({ navigation }) => ({
        title: navigation.state.params.title,
    });
    constructor(props) {
        super(props);
        this.state = {
            sign: '开启签到',
            classStatus: '上课',
        }
    }
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View>
                <View style={styles.four_image_view}>
                    <TouchableWithoutFeedback
                        onPress={() => this.signIn_onPress()}
                    >
                        <View style={styles.vertical_view}>
                            {/* <Image source={require('../../images/coursetools_member.png')} style={{ alignSelf: 'center', width: 45, height: 45 }} /> */}
                            <Icon name="checkbox" onPress={this.onPressButton} style={{color:'#28AB91'}}/>
                            <Text style={{ fontSize: 10 }} >{this.state.sign} </Text>
                        </View>
                    </TouchableWithoutFeedback>
                    <TouchableWithoutFeedback onPress={() => { this.signInResult(); }}>
                        <View style={styles.vertical_view}>
                            {/*<Image source={require('../../images/coursetools_inform.png')} style={{alignSelf:'center',width:45,height:45}}/>*/}
                            {/* <Image source={require('../../images/coursetools_homework.png')} style={{ alignSelf: 'center', width: 45, height: 45 }} /> */}
                            <Icon name="clipboard" onPress={this.onPressButton} style={{color:'#F0AD4E'}}/>
                            <Text style={{ fontSize: 10 }}>
                                签到结果
              </Text>
                        </View>
                    </TouchableWithoutFeedback>
                    {/* <View style={styles.vertical_view}>
                        <Image source={require('../../images/coursetools_abstract.png')} style={{ alignSelf: 'center', width: 45, height: 45 }} />
                        <Text style={{ fontSize: 10 }}>
                            大纲
              </Text>
                    </View>
                    <View style={styles.vertical_view}>
                        <Image source={require('../../images/coursetools_homework.png')} style={{ alignSelf: 'center', width: 45, height: 45 }} />
                        <Text style={{ fontSize: 10 }}>
                            作业
              </Text>
                    </View>
                </View>
                <View style={styles.four_image_view}>
                    <View style={styles.vertical_view}>
                        {/*<Image source={require('../../images/coursetools_member.png')} style={{alignSelf:'center',width:45,height:45}} />
                        <Image source={require('../../images/coursetools_resource.png')} style={{ alignSelf: 'center', width: 45, height: 45 }} />
                        <Text style={{ fontSize: 10 }}>
                            成员
              </Text>
                    </View>
                    <View style={styles.vertical_view}>
                        <Image source={require('../../images/coursetools_calendar.png')} style={{ alignSelf: 'center', width: 45, height: 45 }} />
                        <Text style={{ fontSize: 10 }}>
                            日历
              </Text>
                    </View>
                    <TouchableWithoutFeedback onPress={() => { this.props.navigation.navigate('Icons'); }}>
                        <View style={styles.vertical_view}>
                            <Image source={require('../../images/coursetools_static.png')} style={{ alignSelf: 'center', width: 45, height: 45 }} />
                            <Text style={{ fontSize: 10 }} >
                                学时统计
              </Text>
                        </View>
                    </TouchableWithoutFeedback>
                    <View style={styles.vertical_view}>
                        <Image source={require('../../images/coursetools_talk.png')} style={{ alignSelf: 'center', width: 45, height: 45 }} />
                        <Text style={{ fontSize: 10 }} >交流讨论</Text>
                    </View>*/}
                </View> 
                {/*<View style={{justifyContent: 'center',  paddingLeft:30,  alignItems: 'flex-start',    backgroundColor:'white',    paddingTop:15,}}>
              <Image source={require('../../images/coursetools_talk.png')} style={{alignSelf:'flex-start',width:45,height:45}}/>
              <Text style={{fontSize:10}} >交流讨论</Text>
         </View>*/}
            </View>
        );
    }
    //判断签到开启状态，决定对应图标的呈现 返回值：0（已开启签到），1（未开启签到）
    async componentWillMount() {
        const { course_info } = this.props;
        let Interaction = new interaction();
        let SignInStatus = await Interaction.CheckSignInIcon(course_info.courseid);
        if (SignInStatus == 0) {
            this.setState({
                sign: '结束签到',
            });
        }
    }
    //签到按钮单击事件
    signIn_onPress() {
        if (this.state.sign == '开启签到') {
            Alert.alert('课程：' + this.props.navigation.state.params.title, '确定开启签到?', [
                { text: '取消' },
                {
                    text: '确定', onPress: () => {

                        this.openSignIn();

                    }
                }
            ])
        }
        else {
            Alert.alert('课程：' + this.props.navigation.state.params.title, '确定关闭签到?', [
                { text: '取消' },
                {
                    text: '确定', onPress: () => {
                        const { course_info } = this.props;
                        this.closeSignIn(course_info.courseid);
                        this.setState({ sign: '开启签到' });

                    }
                }
            ])

        }
    }
    //执行开启签到操作
    async openSignIn() {
        const { login_info } = this.props;
        const { course_info } = this.props;
        let Interaction = new interaction();
        let CurrentPosition = await Interaction.getCurrentPosition();
        let openSignInResult = await Interaction.openSignIn(login_info.userName, course_info.courseid, CurrentPosition.longitude, CurrentPosition.latitude, course_info.chiefTeacherName, course_info.coursetitle);
        console.log('开启课堂123', openSignInResult)
        if (openSignInResult.errorCode == 0) {
            Alert.alert('温馨提醒:', '成功开启签到');
            this.setState({ sign: '结束签到' });
        }
        else if (openSignInResult.errorCode == 1) {
            if (openSignInResult.messageInfo == 'failure') { Alert.alert('温馨提醒:', '签到消息推送失败'); }
            else if (openSignInResult.messageInfo == 'course closed') { Alert.alert('温馨提醒:', '课堂未开启'); }
            else if (openSignInResult.messageInfo == 'not interactionCourse') { Alert.alert('温馨提醒:', '此课程为非交互课程'); }
        }
    }
    //执行关闭签到操作
    async closeSignIn(moocCourseID) {
        let Interaction = new interaction();
        console.log('moocCourseID', moocCourseID)
        let closeSignInResult = await Interaction.closeSignIn(moocCourseID);
        console.log('开启课堂123', closeSignInResult)
        if (closeSignInResult == 'success') {
            Alert.alert('温馨提醒:', '成功关闭签到');
        }
        else {
            Alert.alert('温馨提醒:', '签到关闭失败');
        }

    }
    //签到结果单击事件
    signInResult() {
        if (this.props.navigation.state.params.classStatus == '上课') { Alert.alert('温馨提醒:', '课堂未开启'); }
        else { this.props.navigation.navigate('StudentSignInList', { title: this.props.navigation.state.params.title }); }
    }

}
const styles = StyleSheet.create({
    four_image_view: {
        paddingTop: 15,
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems: 'center',
        backgroundColor: 'white',
    },
    vertical_view: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
        paddingBottom: 15,
    },

});
function mapStateToProps(state) {
    return {
        login_info: state.login.login_info,
        course_info: state.course_info.course_info,
        currentPosition: state.intercation.currentPosition,
    }
}

function mapDispatchToProps(dispatch) {
    return {
        classCode: (state) => dispatch(state)
    }
}
const CourseTool = connect(
    mapStateToProps,
    mapDispatchToProps
)(course_tool)

export default CourseTool;
